
@extends('layouts._main')

@section('title','充值余额')

@section('css')
    <style>
        .button_bck{
            background: -webkit-linear-gradient(left top, #ECE0C6 , #D79705); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(bottom right, #ECE0C6, #D79705); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(bottom right, #ECE0C6, #D79705); /* Firefox 3.6 - 15 */
            background: linear-gradient(to bottom right, #ECE0C6 , #D79705); /* 标准的语法（必须放在最后） */
        }
        html{
            background-color: #fff;
        }
        .body{
            font-size: 14px;
            background-color: #fff;
        }
        .nav{
            padding: 5px 15px;
            border-bottom: 1px solid #ddd;
        }
        .recharge_main{
            padding: 10px 15px;
        }

        .placeholder{
            border: 1px solid #E6BE62;
            width: 80%;
            height: 53px;
            text-align: center;
            line-height: 53px;
            margin: 0 auto;
            border-radius: 13px;
        }
        .weui-flex_1{
            margin-top: 10px;
            margin-bottom: 20px;
        }
        .cash_input{
            border: none;
            width: 80%;
        }
        .cash_input_div{
            border-bottom: 1px solid #ddd;
            outline: none;
        }
        .input_p{
            margin: 15px 0;
        }
        .weui-cell__bd p{
            font-size: 12px;
        }
        .weui-cells_checkbox .weui-icon-checked:before {
            color: #D79705;
            font-size: 16px;
        }
        .weui-cells_checkbox .weui-check:checked+.weui-icon-checked:before {
            content: '\EA06';
            color: #D79705;
        }
        .weui-cell {
            padding: 5px 0;
        }
        .weui-cells:after, .weui-cells:before,.weui-cell:before {
            content: none;
        }
        .weui-cells{
            font-size: 14px;
        }
        .exchange_button{
            width: 85%;
            margin-top: 15px;
            border: none;
            background-color: #d79705;
            color: #fff;
            padding: 8px;
            border-radius: 8px;
        }
        .recharge_balance_bottom{
            padding-top: 10px;
            border-top: 1px solid #ddd;
            text-align: center;
        }
        .nav_bar{
            background-color: #fff;
            /*box-shadow: 0px 2px 12px 1px #D0D0D0;*/
            padding: 10px 15px;
            text-align: center;
            border-bottom: 1px solid #D0D0D0;
        }
        .nav_bar>.nav_back {
            background: url('/images/version1/icon_bar_back.png') no-repeat;
            background-size: 20px 20px;
            display: inline-block;
            float: left;
        }
        .weui-label_ali{
            background: url('/images/version1/icon_alipay.png') no-repeat;
        }
        .weui-label_wx{
            background: url('/images/version1/icon_wxpay.png') no-repeat;
        }
        .weui-check__label {
            background-size: 30px 100%;
            padding-left: 35px;
            margin-top: 10px;
        }

        /*#D79705*/
    </style>
@endsection

@section('container')
    <div class="body">
        <div class="nav_bar">
            <div class="nav_back"></div>
            &nbsp;
        </div>

        <div class="recharge_main">
            <p>充值余额</p>

            <div class="weui-flex weui-flex_1">
                <div class="weui-flex__item"><div class="placeholder button_bck">10元</div></div>
                <div class="weui-flex__item"><div class="placeholder">20元</div></div>
            </div>

            <div class="weui-flex">
                <div class="weui-flex__item"><div class="placeholder">50元</div></div>
                <div class="weui-flex__item"><div class="placeholder">100元</div></div>
            </div>
            
            <p class="input_p">其他金额</p>
            <div class="cash_input_div">￥<input type="number" class="cash_input" onkeyup="num(this)" size="11" name="cash" value=""></div>



            <div class="weui-cells weui-cells_checkbox">
                <p>选择支付方式</p>
                <label class="weui-cell weui-check__label weui-label_ali" for="s11">

                    <div class="weui-cell__bd">
                        <p>支付宝支付</p>
                    </div>
                    <div class="weui-cell__hd">
                        <input type="radio" class="weui-check" name="checkbox1" id="s11" checked="checked">
                        <i class="weui-icon-checked"></i>
                    </div>
                </label>
                <label class="weui-cell weui-check__label weui-label_wx" for="s12">

                    <div class="weui-cell__bd">
                        <p>微信支付</p>
                    </div>
                    <div class="weui-cell__hd">
                        <input type="radio" name="checkbox1" class="weui-check" id="s12">
                        <i class="weui-icon-checked"></i>
                    </div>
                </label>
            </div>
        </div>
        
        <div class="recharge_balance_bottom">
            <p>需支付 ￥<span class="need_pay">0.00</span></p>

            <button class="exchange_button" onclick="todoing('敬请期待')">立即支付</button>
        </div>
    </div>
@endsection

@section('js')

    <script type="text/javascript" class="navbar js_show">
        function num(obj){
            obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
            obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字
            obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
            obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
            obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数

            if(obj.value>0){
                $('.need_pay').text(obj.value);
            }else{
                var pay_money = parseInt($('.button_bck').text());
                $('.need_pay').text(pay_money.toFixed(2));
            }
        }
        $(function(){

            var pay_money = 10;

            $('.need_pay').text(pay_money.toFixed(2));

            $('.placeholder').click(function () {
                if($(this).hasClass('button_bck')) return false;

                $('.placeholder').removeClass('button_bck');

                $(this).addClass('button_bck');

                pay_money = parseInt($(this).text());

                $('.need_pay').text(pay_money.toFixed(2));
            });
        });
    </script>
@endsection

